@extends('shop::layouts.master')
@section('title')
    资金账户信息
@endsection
@section('tab')
    <style>
        .send-code{
            width: 90px;
            height: 30px;
            padding: 0 5px;
            margin: 0;
            font-size: 14px;
            text-align: center;
            background: transparent;
            border-radius: 30px;
            color: #a07941;
            border-color: #a07941;

        }
        .layui-send-code {
            float: left;
            display: block;
            line-height: 20px;
            margin-right: 10px;
        }
        .button-disable{
            cursor:not-allowed;
            -webkit-box-shadow:none;
            box-shadow:none;
            opacity:.65;
        }
    </style>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>资金账户信息</legend>
    </fieldset>
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form" lay-filter="form_edit">

                {{--银行账户信息--}}

                <div class="layui-form-item">
                    <label  class="layui-form-label">
                        <span class="x-red">*</span>银行名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bank"  autocomplete="off" class="layui-input"  maxlength="30">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>支行名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bank_branch"  autocomplete="off" class="layui-input"  maxlength="30">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>银行卡号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bank_card"  autocomplete="off" class="layui-input" maxlength="30" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>真实姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bank_card_realname"  autocomplete="off" class="layui-input" maxlength="10">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>银行卡户主真实姓名
                    </div>
                </div>

                {{--支付宝账户信息--}}

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>支付宝账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ali_account"  autocomplete="off" class="layui-input" maxlength="30" >
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red"></span>真实姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ali_account_realname"  autocomplete="off" class="layui-input" maxlength="10">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>支付宝账号户主真实姓名
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="phone" name="phone"  autocomplete="off" class="layui-input" disabled>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" required="" autocomplete="off" class="layui-input"  maxlength="6">
                    </div>
                    <div class="layui-send-code">
                        <input type="button" class="btn btn-default send-code" value="获取验证码" onClick="send_code($(this),'phone')" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <input type="hidden" name="id">
                    <button class="layui-btn" lay-filter="form_edit_submit" lay-submit="">保存</button>
                </div>
            </form>
        </div>
    </div>

@endsection


@section('tab_js')
    <script>
        /*发送验证码*/
        function send_code($_this,$_id) {
            var send_code_seconds = 60;//60秒才能发送一次验证码
            var phone = $.trim($('#'+$_id).val());
            var phoneReg = /^1[3-9]\d{9}$/;//手机号正则

            if (!phoneReg.test(phone)) {
                layer.msg(" 请输入有效的手机号码");
                return false;
            }
            //设置button效果，开始计时
            $_this.attr("disabled", "true");
            $_this.addClass("button-disable");
            $_this.val( + send_code_seconds + "秒再获取");

            var $_url = '{{route('shop_send_phone_code')}}';
            var $_data = {phone:phone};
            $.ajax({
                url:$_url,
                type:'post',
                data:$_data,
                dataType : "json",
                success:function(result){
                    if(result.state === 0){
                        console.log(result,'result');
                        layer.msg("发送成功");
                    }else{
                        layer.msg(result.msg);
                    }
                }});
            var InterValObj1 = window.setInterval( function () {
                if (send_code_seconds <= 0) {
                    window.clearInterval(InterValObj1);//停止计时器
                    $_this.removeAttr("disabled");//启用按钮
                    $_this.removeClass("button-disable");
                    $_this.val("重新发送");
                }
                else {
                    send_code_seconds--;
                    $_this.val( + send_code_seconds + "秒再获取");
                }
            }, 1000); //启动计时器，1秒执行一次
        }

        /*检查表单数据*/
        function check_form_data($_data){
            var msg = '';
            var state = 0;
            if($_data.bank.length <= 0){
                return {state:1,msg:'请填写银行名称'}
            }
            if($_data.bank_branch.length <= 0){
                return {state:1,msg:'请填写支行名称'}
            }
            if($_data.bank_card.length <= 0){
                return {state:1,msg:'请填写银行卡号'}
            }
            if($_data.bank_card_realname.length <= 0){
                return {state:1,msg:'请填写银行卡户主真实姓名'}
            }
            if($_data.ali_account.length <= 0){
                return {state:1,msg:'请填写支付宝账号'}
            }
            if($_data.ali_account_realname.length <= 0){
                return {state:1,msg:'请填写支付宝账号户主真实姓名'}
            }
            if($_data.code.length <= 0){
                return {state:1,msg:'请填写验证码'}
            }

            return {state:state,msg:msg}
        }

        layui.use(['form', 'layer','jquery','laydate'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                //监听提交
                form.on('submit(form_edit_submit)',
                    function(data) {
                        var $_data = data.field;
                        delete $_data.phone;
                        var result = check_form_data($_data);
                        if(result.state === 1){
                            layer.msg(result.msg);
                            return false;
                        }

                        var $_url = '{{route('shop_account_info_update')}}';
                        $.ajax({
                            url:$_url,
                            type:'post',
                            data:$_data,
                            dataType : "json",
                            success:function(result){
                                if(result.state === 0){
                                    layer.msg(
                                        "保存成功",
                                        {time:500,icon: 6},
                                        function() {
                                            //关闭当前frame
                                            xadmin.close();

                                            // 可以对父窗口进行刷新
                                            xadmin.father_reload();

                                        });
                                }else{
                                    layer.msg(result.msg, {time:2000,icon: 5});
                                }

                            }});
                        return false;

                    });
                //表单初始赋值
                var data = {
                    id:"{{$arr_data['id']}}",
                    bank:"{{$arr_data['shop_account']['bank']}}",
                    bank_branch:"{{$arr_data['shop_account']['bank_branch']}}",
                    bank_card:"{{$arr_data['shop_account']['bank_card']}}",
                    bank_card_realname:"{{$arr_data['shop_account']['bank_card_realname']}}",
                    ali_account:"{{$arr_data['shop_account']['ali_account']}}",
                    ali_account_realname:"{{$arr_data['shop_account']['ali_account_realname']}}",
                    phone:"{{$arr_data['phone']}}",
                };
                form.val('form_edit', data)

            });
    </script>
@endsection




